<template>
  <div>
    <div style="margin-bottom: 30px;">
      <a-button type="primary" @click="preview()">配置方式预览</a-button>
    </div>
    <div style="margin-bottom: 30px;">
      <a-button type="primary" @click="preview(true)">HTML方式预览</a-button>
    </div>
    <div >
      <a-button type="primary" @click="pdfDrawerRef?.open()">图片方式预览</a-button>
    </div>
    <PdfDrawer ref="pdfDrawerRef"></PdfDrawer>
  </div>
</template>

<script setup lang="ts">
import { createTableToPDF, createHtmlTableToPDF } from '@/utils/pdf'
import { useTemplateRef } from 'vue';
import PdfDrawer from './pdf-drawer.vue';

const pdfDrawerRef = useTemplateRef('pdfDrawerRef')

function preview(html?: boolean) {
  const tableData = [] as any[]

  for (let index = 0; index < 60; index++) {
    tableData.push({ name: '名称' + Math.floor(index / 10), value: '类型' + index })
  }

  const config = {
    headers: [
      {
        prop: 'name',
        label: '姓名',
        rowSpan: true
      },
      {
        prop: 'value',
        label: '类型'
      }
    ],
    data: tableData,
    rowSpan: 'name'
  }

  if(html) {
    createHtmlTableToPDF(config)
    return
  }
  createTableToPDF(config)
}
</script>

